//out:../css/
@import './base';
@vw:3.75vw;
header{
    width: 100%;
    height: (50/@vw);
    //固定定位
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15/@vw);
    background-color: white;
    z-index: 1;
    .collect {
        width: (235/@vw);
        height: (50/@vw);
       
        img {
            width: 100%;
            height: 100%;
        }
    } 
    .download {
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31a;
        line-height: (30/@vw);
        text-align: center;
        border-radius: (15/@vw);
    }
}
// 搜索
.search {
    margin-top: (50/@vw) ;
    height: (32/@vw);
    // background-color: #f1f4f5;
    // background-color: #2184a5;
    margin-left: (15/@vw);
    margin-right: (15/@vw);
    .txt {
        height:(32/@vw);
        border-radius: (16/@vw);
        background-color: #f2f3f5;
        text-align: center;
        color: #a1a4b3;
        line-height: (32/@vw);
    }   
} 
//banner
.banner img {
    width: 100%;
    height: (108/@vw);
    margin: (13/@vw) 0;
    padding:0 (15/@vw);
    object-fit: cover;
    border-radius: (20/@vw);
}
// 排行榜
.list {
    margin-top: (20 / @vw);
    padding: 0 (15 / @vw);
  }
  // 标题 → 公共样式
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: (16 / @vw);
    line-height: (25 / @vw);
    h4 {
      font-size: (20 / @vw);
    }
    a {
      font-size: (12 / @vw);
      color: #a1a4b3;
    }
  }
  // 排行榜
.list {
    margin-top: (20 / @vw);
    padding: 0 (15 / @vw);
    li {
      display: flex;
      margin-bottom: (16 / @vw);
      height: (105 / @vw);
      background-color: #fff;
      border-radius: (10 / @vw);
      .pic {
        margin-right: (20 / @vw);
        img {
          width: (105 / @vw);
          height: (105 / @vw);
          border-radius: (10 / @vw);
        }
      }
      .txt {
        a {
          display: block;
          font-size: (12 / @vw);
          color: #a1a4b3;
          line-height: 1.8;
        }
  
        .more {
          font-size: (14 / @vw);
          color: #333;
          .iconfont {
            font-size: (16 / @vw);
          }
        }
      }
    }
  }

//推荐
// 推荐歌单
.recommend {
    padding: 0 (15 / @vw);
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        margin-bottom: (16 / @vw);
        width: (105 / @vw);
        height: (143 / @vw);
        // background-color: pink;
      }
    }
  }
  // 图片
.pic {
    position: relative;
    width: (105 / @vw);
    height: (105 / @vw);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: (10 / @vw);
    }
    .cover {
      position: absolute;
      left: 0;
      bottom: 0;
      width: (70 / @vw);
      height: (28 / @vw);
      background-color: rgba(0,0,0,0.8);
      border-radius: 0 (10 / @vw) 0 (10 / @vw);
      text-align: center;
      line-height: (28 / @vw);
      color: #fff;
      font-size: (14 / @vw);
    }
  }
  // 文字
  .txt {
    font-size: (14 / @vw);
  }

//底部
.botton {
    width: 100%;
    height: (45/@vw); 
    background-color:#fcfbfb;
    margin-bottom: (26/@vw);
    border-radius: (30/@vw);
    //固定定位
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15/@vw);
        img{
            width: (36/@vw);
            height: (36/@vw);
    }
    p {
       height: (18/@vw);
       width: (242/@vw);
    }
    .icon-right {
        text-align: center;
        line-height:(32/@vw) ;
        width: (32/@vw);
        height: (32/@vw);
        border-radius: (16/@vw);
        background-color: #f2f3f5;
    }
}